<template>
  <div>
    <el-container style="min-height: 100vh">
      <el-aside :width="sideWith + 'px'" style="background-color: rgb(238, 241, 246); box-shadow: 2px 0 6px rgb(0 21 41/35%)">
       <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow"></Aside>
      </el-aside>

      <el-container>
        <el-header style=" border-bottom: 1px solid #ccc; ">
         <Header :collapseBtnClass="collapseBtnClass" :collapse="collapse" :user="user"></Header>
        </el-header>

        <el-main>
          <router-view @refreshUser="getUser"/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Aside from '@/components/Aside.vue'
import Header from '../components/Header.vue';
//import request from '../utils/request';

export default {
  name: 'home',
  components: {
    Aside,
    Header
  },
  created(){
  this.getUser()
  },
  data() {
    return {
    
      collapseBtnClass: "el-icon-s-fold",
      isCollapse: false,
      sideWith: 200,
      logoTextShow: true,
      user: {}
    }

  },
  methods: {
    collapse() {
      this.isCollapse = !this.isCollapse
      if (this.isCollapse) {//收缩
        this.sideWith = 64
        this.collapseBtnClass = "el-icon-s-unfold"
        this.logoTextShow = false
      } else {//展开
        this.sideWith = 200
        this.collapseBtnClass = "el-icon-s-fold"
        this.logoTextShow = true
      }
    },
    getUser(){
      let username=localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")).username:""
      this.request.get("/user/username/"+username).then(res=>{
        this.user=res.data
      })
    },
    
  }
}
</script>

<style>

</style>
